<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>分步引导</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/steps/jquery.steps.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">


    <style>
        .wizard > .content > .body {
            position: relative;
        }
    </style>

</head>

<body>

<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">惠岩</strong>
                             </span> <span class="text-muted text-xs block">管理员 <b class="caret"></b></span> </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li class="divider"></li>
                            <li><a href="/custom/logout">退出登录</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        摆烂
                    </div>
                </li>
                <li>
                    <a href="/custom/myAppoint"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                </li>
                <li>
                    <a href="/dispatcher/graph_flot"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">借阅榜</span></a>
                </li>
                <li>
                    <a href="/custom/listBook?bookName="><i class="fa fa-bar-chart-o"></i> <span class="nav-label">浏览馆藏</span></a>
                </li>
                <li class="active">
                    <a href="/customer/adminBook/listBook"><i class="fa fa-table"></i> <span
                            class="nav-label">管理图书</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="/customer/adminBook/listBook">查看图书</a></li>
                        <li class="active"><a href="/customer/adminBook/addBookPage">添加图书</a></li>
                    </ul>
                </li>
                <li>
                    <a href="/customer/adminUser/listUser?userId="><i class="fa fa-slideshare"></i> <span class="nav-label">管理用户</span><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="/customer/adminUser/listUser?userId=">查看用户</a></li>
                        <li><a href="/customer/adminOperation/listAction?userId=">用户借阅情况</a></li>
                    </ul>
                </li>
                <li>
                    <a href="/uploadPage"><i class="fa fa-send"></i> <span class="nav-label">文件上传</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    <form role="search" class="navbar-form-custom" action="search_results.html">
                        <div class="form-group">
                            <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message">欢迎来到摆烂图书管理系统</span>
                    </li>
                    <li>
                        <a href="/">
                            <i class="fa fa-male"></i> 个人中心
                        </a>
                    </li>
                    <li>
                        <a href="/custom/logout">
                            <i class="fa fa-sign-out"></i> 退出登录
                        </a>
                    </li>
                </ul>

            </nav>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>添加图书</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <h2>
                                添加新的烂书
                            </h2>
                            <p>
                                人摆烂，书也摆烂
                            </p>

                            <form id="form" onsubmit="addBook()" class="wizard-big">
                                <h1>基本信息</h1>
                                <fieldset>
                                    <h2>图书信息</h2>
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <div class="form-group">
                                                <label>图书号 *</label>
                                                <input id="id" name="book_id" type="text" class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>图书名 *</label>
                                                <input id="name" name="book_name" type="text" class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>图书馆藏数量 *</label>
                                                <input id="num" name="book_number" type="text" class="form-control required">
                                            </div>
                                        </div>
                                    </div>

                                </fieldset>

                                <h1>提示</h1>
                                <fieldset>
                                    <div class="text-center" style="margin-top: 120px">
                                        <h2>马上就添加成功了哦(*￣3￣)╭</h2>
                                    </div>
                                </fieldset>

                                <h1>完成</h1>
                                <fieldset>
                                    <h2>条款和条件</h2>
                                    <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">我同意做摆烂人，读摆烂书</label>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="footer">
            <div class="pull-right">
                摆烂图书管理系统
            </div>
            <div>
                <strong>Copyright</strong> 摆烂联盟 &copy; 2022
            </div>
        </div>

    </div>
</div>

<!-- Mainly scripts -->
<script th:src="@{/js/jquery-2.1.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>
<script th:src="@{/js/plugins/pace/pace.min.js}"></script>

<!-- Steps -->
<script th:src="@{/js/plugins/staps/jquery.steps.min.js}"></script>

<!-- Jquery Validate -->
<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>


<script>
    function addBook(){
        $.ajax({
            url:"/customer/adminBook/addBook",
            type:"get",
            data:$('#form').serialize(),
            dataType:"json",
            contentType:"application/json",
            error: function (data) {
                alert("增加失败"+data.description);
            },
            success:function (data) {
                location.reload();
            }
        });
    }
    $(document).ready(function () {
        $("#wizard").steps();
        $("#form").steps({
            bodyTag: "fieldset",
            onStepChanging: function (event, currentIndex, newIndex) {
                // Always allow going backward even if the current step contains invalid fields!
                if (currentIndex > newIndex) {
                    return true;
                }

                // Forbid suppressing "Warning" step if the user is to young
                if (newIndex === 3 && Number($("#age").val()) < 18) {
                    return false;
                }

                var form = $(this);

                // Clean up if user went backward before
                if (currentIndex < newIndex) {
                    // To remove error styles
                    $(".body:eq(" + newIndex + ") label.error", form).remove();
                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                }

                // Disable validation on fields that are disabled or hidden.
                form.validate().settings.ignore = ":disabled,:hidden";

                // Start validation; Prevent going forward if false
                return form.valid();
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                // Suppress (skip) "Warning" step if the user is old enough.
                if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                    $(this).steps("next");
                }

                // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                if (currentIndex === 2 && priorIndex === 3) {
                    $(this).steps("previous");
                }
            },
            onFinishing: function (event, currentIndex) {
                var form = $(this);

                // Disable validation on fields that are disabled.
                // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                form.validate().settings.ignore = ":disabled";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
                var form = $(this);

                // Submit form input
                form.submit();
            }
        }).validate({
            errorPlacement: function (error, element) {
                element.before(error);
            },
            rules: {
                confirm: {
                    equalTo: "#password"
                }
            }
        });
    });
</script>

</body>

</html>